<template>
  <div class="v-goods-picker">
    <div class="v-goods-picker__placeholder">
      <el-input v-model="keyword" />
      <el-button type="primary" size="small" @click="query">搜索{{ keyword }}</el-button>
    </div>
    <el-table
      ref="tableRef"
      height="555"
      :data="tableData"
      border
      style="width: 100%;"
      highlight-current-row
      @row-click="rowClick"
    >
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column
        v-for="item in header"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <div class="tools-box">
      <pagination
        :page.sync="page.page"
        :limit.sync="page.size"
        :total="total"
        layout="prev, pager, next"
        @pagination="handleFetch"
      />
      <div>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button type="primary" @click="handleCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Pagination from '@/components/Pagination'

export default {
  name: 'VGoodsPicker',
  inheritAttrs: false,
  components: {
    Pagination
  },
  props: {
    url: String,
    params: null
  },
  data() {
    return {
      page: {
        page: 1,
        size: 10
      },
      keyword: this.params && this.params.keyword,
      total: 0,
      header: [
        {
          'dictionary': '',
          'label': '商品编码',
          'prop': 'goodsCode',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 200
        },
        {
          'dictionary': '',
          'label': '商品名称',
          'prop': 'goodsName',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 500
        },
        {
          'dictionary': '',
          'label': '条形码',
          'prop': 'barcode',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 200
        }, {
          'dictionary': '',
          'label': '可用量',
          'prop': 'usableNum',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 150
        },
        {
          'dictionary': '',
          'label': '单价',
          'prop': 'taxPrice',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 150
        },
        {
          'dictionary': '',
          'label': '箱价',
          'prop': 'taxBoxPrice',
          'showName': '',
          'type': '1',
          'visible': true,
          'width': 150
        }
      ],
      tableData: [],
      currentRow: null
    }
  },
  watch: {
    params: {
      handler() {
        this.query()
      },
      deep: true
    }
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      this.page.page = 1
      this.tableData = []
      this.handleFetch()
    },
    handleFetch() {
      const config = {
        url: this.url,
        methods: 'get',
        params: {
          ...this.params,
          ...this.page,
          keyword: this.keyword
        }
      }
      request(config).then((res) => {
        this.tableData = res.content || res.data.content
        this.total = res.totalElements || res.data.totalElements
      })
    },
    rowClick(row, column, event) {
      this.currentRow = row
      this.$emit('change', row)
    },
    handleConfirm() {
      this.$emit('confirm', this.currentRow)
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss">
.v-goods-picker {
  .v-goods-picker__placeholder {
    display: flex;
    margin-bottom: 8px;
  }

  .tools-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pagination-container {
    padding: 0;
    margin: 10px;
    text-align: center;
  }
}
</style>
